<template>
    <div>
        <el-tabs v-model="activeName" class="demo-tabs">
            <el-tab-pane label="修改密码" name="first">
                <div>
                    <!-- <div class="password-item">
                        <p>手机号 158****123456</p>
                        <p>可用手机号加密码登录，可通过手机号找回密码</p>
                    </div> -->
                    <div class="password-item password-button">
                        <div>
                            <p>手机号：{{phone.substr(0,3)}}****{{phone.substr(phone.length - 3)}}</p>
                            <p>可通过原手机号码和验证码重置修改密码。</p>
                        </div>
                        <el-button type="primary" @click="dialogFormVisible = true">修改密码</el-button>
                    </div>
                </div>
            </el-tab-pane>
        </el-tabs>
        <el-dialog width="20%" v-model="dialogFormVisible" title="修改密码">
            <el-form :model="form" ref="ruleFormRef" :rules="rules">
                <el-form-item  placeholder="请输入手机号码" prop="phone">
                    <el-input v-model="form.phone" placeholder="请输入手机号码" autocomplete="off"/>
                </el-form-item>
                <el-form-item  placeholder="请输入新密码" prop="password">
                    <el-input v-model="form.password"  placeholder="请输入新密码" autocomplete="off"/>
                </el-form-item>
                <el-form-item prop="code">
                    <el-input type="text" placeholder="请输入短信验证码" v-model="form.code">
                        <template #suffix>
                        <span class="rule-password">
                        <TencentCaptcha scene="2" :phone="form.phone" class="rule-password">
                        </TencentCaptcha>
                    </span>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm(ruleFormRef)"
                    >确认</el-button
                    >
                    <el-button @click="resetForm(ruleFormRef)">重置</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
    import TencentCaptcha from "../../components/TencentCaptcha/TencentCaptcha";
    import {reactive, toRefs,ref} from 'vue'
    import {meRevisePassword} from "../../api/api";
    import {ElMessage} from "element-plus";

    export default {
        name: "updatePassword",
        setup() {
            let data = reactive({
                activeName: 'first',
                phone:''
            })

            data.phone = localStorage.getItem('phone')

            const form = reactive({
                phone:'',
                code:'',
                password:''
            })

            const ruleFormRef = ref(null);
            const validatePhone = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('手机号码不能为空'))
                } else {
                    callback()
                }
            }

            const validateCode = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('验证码不能为空'))
                } else {
                    callback()
                }
            }

            const validatePassword = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('密码不能为空'))
                } else {
                    callback()
                }
            }

            const rules = reactive({
                phone: [{ validator: validatePhone, trigger: 'blur' }],
                code: [{ validator: validateCode, trigger: 'blur' }],
                password: [{ validator: validatePassword, trigger: 'blur' }],
            })

            const dialogFormVisible = ref(false)

            const submitForm = (formEl) => {
                if (!formEl) return
                formEl.validate((valid) => {
                    if (valid) {
                        console.log('submit!')
                        meRevisePassword(form).then(res =>{
                            console.log(res)
                            ElMessage({type:'success',message:res.message})
                        }).catch(err =>{
                            ElMessage({type:'error',message:err.message})
                        })
                    } else {
                        console.log('error submit!')
                        return false
                    }
                })
            }

            const resetForm = (formEl) => {
                if (!formEl) return
                formEl.resetFields()
            }


            return {
                rules,
                ruleFormRef,
                dialogFormVisible,
                form,
                submitForm,
                resetForm,
                ...toRefs(data)
            }
        },
        components:{
            TencentCaptcha
        }
    }
</script>

<style scoped>
    .password-item {
        padding: 20px;
        background-color: rgba(248, 248, 248, 1);
        margin-bottom: 10px;
    }

    .password-button {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
</style>
